@import "common";

:host {
  @apply block;
  @apply grow-0;
}

// 按钮的三条横线动画
#mobileBtn {

  span {
    transition: all 0.2s;
  }
}

#nav {
  transition: all 0.3s ease-in-out;

  &.show {
    height: auto;
    //height: calc-size(auto);
  }
}

.sub-menu {
  & > ul {
    height: 0;
    overflow: hidden;
    padding: 0 0.5rem;
    transition: height 0.3s ease-in-out,
    padding-top 0.3s ease-in-out,
    padding-bottom 0.3s ease-in-out;

    &.show {
      padding: 0.5rem;
      height: auto;
      //height: calc-size(auto);
    }
  }
}

@media (min-width: 1024px) {
  .sub-menu {
    &:hover {
      & > ul {
        padding: 0.5rem;
        height: auto;
      }
    }

  }
}
